<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 事件处理程序的调用  -->
		
		<button onclick="alert('按钮1被按了')">按钮1</button>
		
		<button onclick="foo2()">按钮2</button>
		
		<button id="btn3">按钮3</button>
		
		<button id="btn4">按钮4</button>
		
		<script>
			function foo2()
			{
				alert("按钮2被按了!")
			}
			
			//var btn3 = document.getElementById("btn3");  
			btn3.onclick = function()
			{
				alert("按钮3被按了!");
			}
			// 后面的处理函数会覆盖前面那个
			btn3.onclick = function()
			{
				alert("按钮3被按了!2");
			}
			
			
			btn4.addEventListener("click",function (){
				alert("按钮4被按了")
			},true);
			// 和btn3的区别。添加了2个监听处理 两个处理都会执行
			btn4.addEventListener("click",function (){
				alert("按钮4被按了2")
			},true);
			
			
			
		</script>
		
	</body>
</html>
